<template>
  <div>
    <h1>员工管理</h1>
    <input type="text" v-model="sel" placeholder="输入用户名字">
    <button @click="stateSel()">搜索</button>
    <button @click="int()" class="dea">添加用户</button>

    <table>
      <tr>
        <td>用户ID</td>
        <td>姓名</td>
        <td>密码</td>
        <td>角色</td>
        <td>用户详情</td>
        <td>修改</td>
        <td>删除</td>
      </tr>
      <tr v-for="user in page.list">
        <td>{{user.userId}}</td>
        <td>{{user.userName}}</td>
        <td>{{user.passWord}}</td>
        <td>{{user.role.roleName}}</td>
        <td class="del" @click="check(user)">详情</td>
        <td class="del" @click="revise(user)">修改</td>
        <td class="del" @click="del(user.userId)">删除</td>
      </tr>
    </table>

    <div>
      <button id="first" @click="toPage(1)" >首页</button>
      <button id="btnUp" @click="toPage(page.pageNow-1)">上一页</button>
      <input type="text" :value="'当前页数'+page.pageNow">
      <button id="btnDown" @click="toPage(page.pageNow+1)">下一页</button>
      <button id="last" @click="toPage(page.pageTotal)" >尾页</button>
      <span>搜索到{{page.pageCount}}条记录</span>
    </div>



    <div id="box" ref="intt">
      <p class="p">添加员工</p>
      <p class="pd">用户登录名:<input type="text" v-model="cc"></p>
      <p class="pd">密码:<input type="text" v-model="cc2"></p>
      <p class="pd">确认密码:<input type="text" v-model="cc3"></p>
      <p class="pd">真实姓名:<input type="text" v-model="cc4"></p>
      <p class="pd">所在部门:
        <select v-model="cl">
          <option v-for="user in lists" :value="user.departId">{{user.departName}}</option>
        </select>
      </p>
      <p class="pd">性别:
        <select v-model="cl5">
          <option value="1">男</option>
          <option value="2">女</option>
        </select>
      </p>
      <p class="pd">角色:
        <select v-model="cl2">
          <option v-for="user in lists2" :value="user.roleId">{{user.roleName}}</option>
        </select>
      </p>
      <p class="pd">头像
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" width="50px" height="50px" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </p>
      <p class="pd">当前状态:
        <select v-model="cl3">
          <option v-for="user in lists3" :value="user.userStateId">{{user.userStateName}}</option>
        </select>
      </p>
      <button @click="sev()" class="bbj">保存</button>
      <button @click="retu()" class="bbj">返回</button>
    </div>



    <div id="box2">
      <p>用户详细信息</p>
      <p>用户号:{{cq.userId}}</p>
      <p>姓名:{{cq.userName}}</p>
      <p>密码:{{cq.passWord}}</p>
      <p>部门:{{cl}}</p>
      <p>性别:{{cl5==1?"男":"女"}}</p>
      <p>角色:{{cl2}}</p>
      <p>用户状态:{{cl3}}</p>
            照片:<img :src="ph">
      <button @click="ree()" class="bbj">返回</button>
    </div>

    <div id="box3">
      <p>修改用户信息</p>
      <p class="pd">用户登录名:<input type="text" v-model="q1" disabled></p>
      <p class="pd">密码:<input type="text" v-model="q3"></p>
      <p class="pd">真实姓名:<input type="text" v-model="q2"></p>
      <p class="pd">所在部门:
        <select v-model="cls">
          <option v-for="user in lists" :value="user.departId">{{user.departName}}</option>
        </select>
      </p>
      <p class="pd">性别:
        <select v-model="cls5">
          <option value="1">男</option>
          <option value="2">女</option>
        </select>
      </p>
      <p class="pd">角色:
        <select v-model="cls2">
          <option v-for="user in lists2" :value="user.roleId">{{user.roleName}}</option>
        </select>
      </p>
      <p>上传图片:</p ><p class="zh"><el-upload
        class="avatar-uploader"
        action="http://localhost:8080/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
      <img v-if="imageU" width="50px" height="50px" :src="imageU" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload></p >
      <p class="pd">当前状态:
        <select v-model="cls3">
          <option v-for="user in lists3" :value="user.userStateId">{{user.userStateName}}</option>
        </select>
      </p>
      <button @click="uds()" class="bbj1">修改</button>
      <button @click="raa()" class="bbj">返回</button>
    </div>

  </div>
</template>

<script setup>
import {ref} from "vue";
import api from "@/router/axios.js";

let cc = ref("");
let ph = ref("");
let cc2 = ref("");
let cc3 = ref("");
let cc4 = ref("");
let cl5 = ref({})
let cl = ref({});
let cl2 = ref({});
let cl3 = ref({});

let cls = ref({});
let cls2 = ref({});
let cls3 = ref({});
let cls5 = ref({});

let sel = ref("");
let list = ref({})

const intt = ref();

function stateSel(){
  page.value=""
  api({url:"/staffSel",
    params:{
      "userName":sel.value
    }
  }).then(resp=>{
    page.value = resp.data
    if (sel.value==""){
      selLogging();;
    }
    console.log(page.value)
  })

}



let search = ref({})
let page = ref({
  pageNow: 1, limit: 3
});


selectA();
let lists = ref({})
function selectA(){
  api({
    url:"/selectAll",
  }).then(resp=>{
    lists.value = resp.data
  })
}

selectB();
let lists2 = ref({})
function selectB(){
  api({
    url:"/role",
  }).then(resp=>{
    lists2.value = resp.data
  })
}

selectC();
let lists3 = ref({})
function selectC(){
  api({
    url:"/selState",
  }).then(resp=>{
    lists3.value = resp.data
  })
}



selLogging();
function selLogging(){
  page.value.list = [];
  let param = {...search.value,...page.value};
  api({url:"/selLogg",
    params:param
  }).then(resp=>{
    page.value = resp.data
    console.log(resp.data)
    判断当前页数禁用按钮
    if (page.value.pageNow == 1){
      document.getElementById("btnUp").disabled=true;
      document.getElementById("first").disabled=true;
    }else{
      document.getElementById("btnUp").disabled=false;
      document.getElementById("first").disabled=false;
    }
  })
}
function toPage(num){
  page.value.pageNow=num;
  if (num == page.value.pageTotal){
    document.getElementById("btnDown").disabled=true;
    document.getElementById("last").disabled=true;
  }else{
    document.getElementById("btnDown").disabled=false;
    document.getElementById("last").disabled=false;
  }
  selLogging();
}

function del(id){
  api({
    url:"/userinfo",
    method:"delete",params:{userId:id}
  }).then(resp=>{
    alert(resp.data.message)
    selLogging();
  })
}

function int(){
  intt.value.style.display="block";
}
function retu(){
  intt.value.style.display="none";
}
function ree(){
  document.getElementById("box2").style.display ="none";
}
function raa(){
  document.getElementById("box3").style.display ="none";
}


// img图片的地址
let imageUrl = ref('');
let imageUr = ref('');

// 上传成功后触发，在img中显示上传的图片，resp为后端上传方法的返回值
const handleAvatarSuccess = (resp) => {
  imageUrl.value = `http://localhost:8080/download?name=${resp}`
};

// 上传前触发，可用于检验上传文件的类型、大小限制等。
const beforeAvatarUpload = (file) => {
  /*
  const isPNG = file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isPNG) {
      this.$message.error('上传头像图片只能是 PNG 格式!');
  }
  if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 2MB!');
  }
   */
  return true;
}


function sev(){
  intt.value.style.display="none";
  if (cc2.value!=cc3.value){
    alert("两次密码不一致")
    return;
  }
  api({
    url:"/userinfo",method:"post",
    params:{"userId":cc.value,
      "passWord":cc2.value,
      "userName":cc4.value,
      "departId":cl.value,
      "roleId":cl2.value,
      "gender":cl5.value,
      "userStateId":cl3.value,
      "headImg":imageUrl.value.substring(36,imageUrl.value.length)
    }
  }).then(resp=>{
    cc.value = "";
    cc2.value = "";
    cc3.value = "";
    cc4.value = "";
    cl.value = {};
    cl2.value = {};
    cl3.value = {};
    cl5.value = {};
    imageUrl.value = "";
    alert(resp.data.message)
    selLogging();
  })
}

let q1 = ref("");
let q2 = ref("");
let q3 = ref("");
let imageU = ref('')
function revise(user){
  document.getElementById("box3").style.display = "block";
  q1.value = user.userId;
  q2.value = user.userName
  q3.value = user.passWord
  cls.value=user.department.departId;
  cls2.value=user.role.roleId;
  cls5.value=user.gender;
  cls3.value=user.userStates.userStateId;
  imageU.value=`http://localhost:8080/download?name=${user.headImg}`

}

function uds(){
  console.log(q1.value)
  console.log(q3.value)
  console.log(q2.value)
  console.log(cls2.value)
  console.log(cls.value)
  console.log(cls5.value)
  console.log(cls3.value)
  console.log(ph.value)
  api({
    url:"/userin",
    params:{
      "userId":q1.value,
      "userName":q2.value,
      "passWord":q3.value,
      "departId":cls.value,
      "roleId":cls2.value,
      "gender":cls5.value,
      "userStateId":cls3.value,
      "headImg":imageUrl.value.substring(36,imageUrl.value.length)

    }
  }).then(resp=>{
    alert(resp.data.message)
    selLogging();
  })
}

let cq = ref("");

function check(user){
  document.getElementById("box2").style.display = "block";
  cq.value=user;

  cl.value=user.department.departName;
  cl5.value=user.gender;
  cl2.value=user.role.roleName
  cl3.value=user.userStates.userStateName
  ph.value=`http://localhost:8080/download?name=${user.headImg}`
  console.log()
  console.log(cq.value)
}




</script>

<style scoped>
/*上传图片样式：*/
.avatar-uploader .el-upload {
  border: dashed 2px #d8dde3 !important;
  border-radius: 4px !important;
  background: #fcfcfc;
}

.avatar-uploader .avatar-uploader-icon {
  background: #fcfcfc;
}

.avatar-uploader .el-icon-plus:before {
  content: "上传图片" !important;
  font-size: 16px;
  color: #000;
}




td{
  width: 180px;
  height: 60px;
  border:1px solid black;
}
.del:hover{
  cursor: pointer;
  color:red;
}

#box{
  width: 600px;
  height: 500px;
  background: #e7e7e7;
  position: fixed;
  left: 35%;
  top:10%;
  display: none;
}
#box2{
  width: 600px;
  height: 500px;
  background: #e7e7e7;
  position: fixed;
  left: 35%;
  top:10%;
  display: none;
}
.dea{
  margin-left: 60px;
  width: 100px;
  height: 30px;
}
.pd{
  margin-left: 20px;
}
.p{
  text-align: center;
  color: red;
  font-size: 20px;
}

.bbj{
  margin-left: 50px;
  width: 100px;
  height: 30px;
}
.bbj1{
  margin-left: 50px;
  width: 100px;
  height: 30px;
}
img{
  width: 100px;
  height: 100px;
}
#box3{
  width: 600px;
  height: 500px;
  background: #e7e7e7;
  position: fixed;
  left: 35%;
  top:10%;
  display: none;
}
</style>